<template>
    <div>
        <!--页面主体部分-->
        <section class="mainbox">
            <div class="column">
                <div class="panelNav">
                    <div class="panelNav-foot"></div>

                    <month-picker :width="300" style="
                        transform: translateX(-50%);
                        left: 50%;
                      "/>

                    <router-link to="/gy2" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor2 }"
                                 @click.native="reverseColor2"><i
                            class="iconfont icon icon-zhangwaizichanchuzhi-88"></i> 工业总产值
                    </router-link>
                    <router-link to="/gy3" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor3 }"
                                 @click.native="reverseColor3"><i class="iconfont icon icon-shouru"></i> 规上工业总产值
                    </router-link>
                    <router-link to="/gy4" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor4 }"
                                 @click.native="reverseColor4"><i class="iconfont icon icon-touzi"></i> 高新技术产业产值
                    </router-link>
                    <router-link to="/gy5" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor5 }"
                                 @click.native="reverseColor5"><i class="iconfont icon icon-touzi1"></i> 综合能源消费量(吨标准煤)
                    </router-link>
                    <router-link to="/gy6" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor6 }"
                                 @click.native="reverseColor6"><i
                            class="iconfont icon icon-chukoutuishui_chukoufapiaopikai"></i> 规上工业用电量(万千瓦时)
                    </router-link>
                    <router-link to="/gy7" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor7 }"
                                 @click.native="reverseColor7"><i class="iconfont icon iconfont icon icon-qian"></i>
                        万元产值能耗(吨标准煤/万元)
                    </router-link>
                    <router-link to="/gy10" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor10 }"
                                 @click.native="reverseColor10">
                        <i class="iconfont icon icon-shouru"></i> 利润总额
                    </router-link>
                    <router-link to="/gy11" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor1 }"
                                 @click.native="reverseColor1"><i
                            class="iconfont icon icon-touzi"></i> 利税总额
                    </router-link>
                    <router-link to="/gy8" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor8 }"
                                 @click.native="reverseColor8">
                        <i class="iconfont icon icon-suoshuxiangzhen"></i>
                        规模以上工业分行业产值
                    </router-link>
                    <router-link to="/gy9" class="rou" tag="li"
                                 v-bind:style="{ background: activeColor9 }"
                                 @click.native="reverseColor9"><i
                            class="iconfont icon icon-chukoutuishui_chukoupeixun"></i> 重点工业企业产值完成情况
                    </router-link>

                </div>
            </div>
            <router-view></router-view>
        </section>
    </div>


</template>


<script>
import '../../assets/v-icon/iconfont.css';

export default {
    name: 'HomeView4',
    mounted() {
    },
    methods: {
        reverseColor1: function () {
            this.activeColor1 = 'rgba(19, 58, 150)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'

        },
        reverseColor2: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(19, 58, 150)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor3: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(19, 58, 150)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor4: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(19, 58, 150)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor5: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(19, 58, 150)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor6: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(19, 58, 150)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor7: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(19, 58, 150)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor8: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(19, 58, 150)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor9: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(19, 58, 150)'
            this.activeColor10 = 'rgba(7, 22, 64)'
        },
        reverseColor10: function () {
            this.activeColor1 = 'rgba(7, 22, 64)'
            this.activeColor2 = 'rgba(7, 22, 64)'
            this.activeColor3 = 'rgba(7, 22, 64)'
            this.activeColor4 = 'rgba(7, 22, 64)'
            this.activeColor5 = 'rgba(7, 22, 64)'
            this.activeColor6 = 'rgba(7, 22, 64)'
            this.activeColor7 = 'rgba(7, 22, 64)'
            this.activeColor8 = 'rgba(7, 22, 64)'
            this.activeColor9 = 'rgba(7, 22, 64)'
            this.activeColor10 = 'rgba(19, 58, 150)'
        },
    },
    data() {
        return {
            selectedTime: new Date(),
            selectedYear: 0,
            selectedMonth: 0,
            activeColor1: 'rgba(7, 22, 64)',
            activeColor2: 'rgba(19, 58, 150)',
            activeColor3: 'rgba(7, 22, 64)',
            activeColor4: 'rgba(7, 22, 64)',
            activeColor5: 'rgba(7, 22, 64)',
            activeColor6: 'rgba(7, 22, 64)',
            activeColor7: 'rgba(7, 22, 64)',
            activeColor8: 'rgba(7, 22, 64)',
            activeColor9: 'rgba(7, 22, 64)',
            activeColor10: 'rgba(7, 22, 64)',
        }
    },
}
</script>